<template>
	<view class="container">
		<!-- 增强型头部 -->
		<view class="header-bg">
			<view class="gradient-header">
				<view class="user-info">
					<image class="avatar" :src="userInfo.avatar || '/static/default-avatar.png'" />
					<view class="user-meta">
						<text class="welcome">{{ userInfo.realName || userInfo.username }}</text>
						<text class="stats">已开设 {{ courses.length }} 门课程</text>
					</view>
				</view>
				<uni-icons type="plus" size="28" color="#fff" @click="navigateToCreate" />
			</view>
		</view>

		<!-- 增强筛选区域 -->
		<view class="filter-container sticky-container">
			<uni-search-bar placeholder="搜索课程名称" v-model="searchText" @input="handleSearch" radius="30" bgColor="#fff"
				clearable />
		</view>

		<!-- 增强课程列表 -->
		<scroll-view class="course-list" scroll-y @scrolltolower="loadMore" refresher-enabled
			:refresher-triggered="isRefreshing" @refresherrefresh="onRefresh">
			<view class="list-container">
				<!-- 课程卡片增强版 -->
				<view v-for="course in courses" :key="course.courseId" class="course-card card-hover"
					@click="navigateToDetail(course)">
					<image v-if="course.cover" class="course-cover" :src="course.cover" mode="aspectFill" />
					<view class="card-content">
						<view class="card-header">
							<text class="course-name">{{ course.courseName }}</text>
							<view class="status-wrapper">
								<view :class="['status-badge', getStatusClass(course.status)]">
									{{ course.status }}
								</view>
							</view>
						</view>

						<view class="progress-bar">
							<view class="progress-inner" :style="{ width: `${course.progress}%` }" />
						</view>

						<view class="meta-info">
							<view class="time-info">
								<uni-icons type="calendar" size="16" color="#666" />
								<text>{{ course.startTime }} - {{ course.endTime }}</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 加载状态 -->
				<view v-if="loading" class="loading-wrapper">
					<uni-load-more status="loading" />
				</view>

				<!-- 空状态增强 -->
				<view v-if="!courses.length" class="empty-state">
					<image class="empty-image" src="/static/empty-course.png" />
					<text class="empty-text">暂无相关课程</text>
					<button class="create-button" @click="navigateToCreate">创建新课程</button>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { getTeacherCourse } from '../../../request/teacherCourse.js'

export default {
	data() {
		return {
			userInfo: {},
			courses: [],
			courseTotal: 0,
			searchText: '',
			currentStatus: 0,
			sortType: 0,
			sortOptions: ['最新创建', '最近更新', '最多学生'],
			statusItems: ['全部', '进行中', '已结课', '未开始'],
			statusMap: {
				active: { text: '进行中', color: '#2e7d32' },
				completed: { text: '已结课', color: '#666' },
				pending: { text: '未开始', color: '#ef6c00' }
			},
			loading: false,
			isRefreshing: false,
			page: 1,
			pageSize: 10
		}
	},
	computed: {
	},
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo') || {}
		this.loadCourses()
	},
	methods: {
		navigateToDetail(course) {
			const courseData = JSON.stringify(course);
			uni.navigateTo({
				url: `/pages/allcourse/coursedetail?course=${courseData}`
			});
			
		},
		async loadCourses(forceUpdate = false) {
			this.loading = true
			try {
				const res = await getTeacherCourse({
					teacherId: this.userInfo.userId,
					role: this.userInfo.role,
				})
				console.log(res, 'res');

				this.courses = res.data
				this.courseTotal = res.data.length
				this.loading = false
			} catch (error) {
				uni.showToast({ title: '数据加载失败', icon: 'none' })
			} finally {
				this.loading = false
				this.isRefreshing = false
				uni.stopPullDownRefresh()
			}
		},

		// 其他方法优化...
		handleSearch() {
			// 添加防抖处理
			clearTimeout(this.searchTimer)
			this.searchTimer = setTimeout(() => {
				this.page = 1
				this.loadCourses(true)
			}, 300)
		},

		navigateToCreate() {
			uni.navigateTo({ url: '/pages/course/create' })
		},

		// 样式类生成优化
		getStatusClass(status) {
			return `status-${status}`
		}
	}
}
</script>

<style lang="scss" scoped>
/* 新增样式 */
.container {
	background: #f8f9fa;
}

.header-bg {
	background: linear-gradient(135deg, #5B89F7, #6F5BFF);
	padding-bottom: 120rpx;
}

.gradient-header {
	padding: 40rpx 30rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;

	.user-info {
		display: flex;
		align-items: center;
		gap: 20rpx;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			border: 2rpx solid rgba(255, 255, 255, 0.2);
		}

		.user-meta {
			display: flex;
			flex-direction: column;

			.welcome {
				color: #fff;
				font-size: 36rpx;
				font-weight: 500;
			}

			.stats {
				color: rgba(255, 255, 255, 0.8);
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}
	}
}

.filter-container {
	position: relative;
	margin-top: -80rpx;
	padding: 0 30rpx;

	&.sticky-container {
		position: sticky;
		top: 10;
		z-index: 10;
	}

	.filter-row {
		width: auto;
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-top: 20rpx;
		background: #fff;
		padding: 20rpx;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

		.sort-trigger {
			display: flex;
			align-items: center;
			gap: 8rpx;
			padding: 12rpx 20rpx;
			background: #f8f9fa;
			border-radius: 8rpx;
		}
	}
}

.course-card {
	background: #fff;
	border-radius: 24rpx;
	overflow: hidden;
	margin-bottom: 24rpx;
	transition: transform 0.2s ease;

	&.card-hover:active {
		transform: scale(0.98);
	}

	.course-cover {
		width: 100%;
		height: 300rpx;
		background: #eee;
	}

	.card-content {
		padding: 24rpx;

		.card-header {
			display: flex;
			justify-content: space-between;
			align-items: flex-start;
			margin-bottom: 20rpx;

			.course-name {
				font-size: 34rpx;
				font-weight: 600;
				color: #333;
				flex: 1;
			}

			.status-wrapper {
				display: flex;
				align-items: center;
				gap: 16rpx;

				.status-badge {
					padding: 6rpx 20rpx;
					border-radius: 32rpx;
					font-size: 24rpx;

					&.status-active {
						background: #e8f5e9;
						color: #2e7d32;
					}

					&.status-completed {
						background: #f5f5f5;
						color: #666;
					}

					&.status-pending {
						background: #fff3e0;
						color: #ef6c00;
					}
				}

				.student-count {
					font-size: 24rpx;
					color: #666;
					display: flex;
					align-items: center;
					gap: 4rpx;
				}
			}
		}

		.progress-bar {
			height: 8rpx;
			background: #eee;
			border-radius: 4rpx;
			margin: 20rpx 0;

			.progress-inner {
				height: 100%;
				background: #5B89F7;
				border-radius: 4rpx;
				transition: width 0.3s ease;
			}
		}

		.meta-info {
			display: flex;
			justify-content: space-between;
			font-size: 24rpx;
			color: #666;

			.time-info,
			.teacher-info {
				display: flex;
				align-items: center;
				gap: 8rpx;
			}
		}
	}
}

.empty-state {
	text-align: center;
	padding: 100rpx 0;

	.empty-image {
		width: 300rpx;
		height: 300rpx;
		opacity: 0.8;
	}

	.empty-text {
		display: block;
		color: #999;
		margin: 20rpx 0;
	}

	.create-button {
		background: #5B89F7;
		color: #fff;
		width: 60%;
		border-radius: 50rpx;
		margin-top: 40rpx;
	}
}
</style>